/*
 * @Author: LiJia
 * @Date: 2021-03-20 22:13:31
 * @LastEditTime: 2021-04-01 05:10:13
 * @LastEditors: LiJia
 * @Description: Description
 * @FilePath: \class-manage-system\miniprogram\pages\components\subject-item\subject-item.ts
 */
Component({
  properties: {
    item: {
      type: Object,
      value: {}
    },
    index: {
      type: Number,
      value: 0
    }
  },
  data: {
    textareaWordLength: "--/--",

    selectIndex: 0,
    selectOptions: [],

    radioOptions: [],

    checkboxOptions: [],

    errorTips: "这道题出现了某些问题..."
  },

  // 组件实例化，但节点树还未导入，因此这时不能用setData
  created() {
    console.log(this.data)
  },

  // 节点树完成，可以用setData渲染节点，但无法操作节点
  attached() {
    // 初始化 textareaWordLength
    switch (this.data.item.type) {
      case "textarea":
        this.setTextareaWordLength()
        break
      case "input":
        break
      case "select":
        this.setSelectOptions()
        break
      case "radio":
        this.setRadioOptions()
        break
      case "checkbox":
        this.setCheckboxOptions()
        break
      default:
        break
    }
  },

  // 组件布局完成，这时可以获取节点信息，也可以操作节点
  ready() {},

  // 组件实例被移动到树的另一个位置
  moved() {},

  // 组件实例从节点树中移除
  detached() {},

  methods: {
    // 用户自定义方法
    /**
     * 初始化 textarea 的 textareaWordLength
     */
    setTextareaWordLength(event?) {
      
      if (event) {
        this.setData({
          textareaWordLength: event.detail.value.length + "/" + this.data.item.maxLength
        })
      } else {
        let maxLength = this.data.item.maxLength === -1 ? "--" : this.data.item.maxLength.toString()
        let itemMaxLength = 'item.maxLength'
        this.setData({
          [itemMaxLength]: maxLength
        })
        this.setData({
          textareaWordLength: "0/" + (this.data.item.maxLength || "--")
        })
      }
    },
    /**
     * 初始化 select 的 selectOptions
     */
    setSelectOptions(event?) {
      if (event) {
        this.setData({
          selectIndex: event.detail.value
        })
      } else {
        let selectOptions: never[] = []
        this.data.item.options.forEach((opt: { value: any }) => {
          selectOptions.push(opt.value as never)
        })
        this.setData({
          selectOptions: selectOptions
        })
      }
    },
    /**
     * 初始化 radio 的 radioOptions
     */
    setRadioOptions(event?) {
      if (event) {
      } else {
        // let radioOptions: never[] = []
        // this.data.item.option.forEach((opt: { value: any }) => {
        //   radioOptions.push(opt.value as never)
        // })
        this.setData({
          radioOptions: this.data.item.options
        })
      }
    },
    /**
     * 初始化 checkbox 的 checkboxOptions
     */
    setCheckboxOptions(event?) {
      if (event) {

      } else {
        this.setData({
          checkboxOptions: this.data.item.options
        })
      }
    },
    /**
     * input change
     */
    inputChange(event) {
      this.emitData(event)
    },
    /**
     * textarea 输入触发事件
     */
    textareaInput(event) {
      this.setTextareaWordLength(event)
      this.emitData(event)
    },
    /**
     * select 选择触发事件
     */
    selectChange(event) {
      this.setSelectOptions(event)
      let _event = { ...event }
      _event.detail = {
        value: this.data.selectOptions[event.detail.value]
      }
      this.emitData(_event)
    },
    /**
     * radio 选择触发事件
     */
    radioChange(event) {
      this.setRadioOptions(event)
      this.emitData(event)
    },
    /**
     * checkbox 选择触发事件
     */
    checkboxChange(event) {
      this.setCheckboxOptions(event)
      this.emitData(event)
    },
    emitData(event) {
      let currentAnswer = {
        id: this.data.index,
        value: event.detail.value
      }
      this.triggerEvent('valueChanged', currentAnswer) //valueChanged 自定义名称事件，父组件中使用
    }
  }
})
